<template>
  <div class="menuBar">
    <div :class="pcOrWx?'topNavPhone':'topNav'">
      <div class="w" :class="pcOrWx?'':'topNavCon'">
        <div class="cn active"></div>
        <div class="en "></div>
      </div>
    </div>

    <nav class="w">
      <MenuPhone v-if="pcOrWx"></MenuPhone>
      <MenuPc v-else="pcOrWx"></MenuPc>
    </nav>

    <div class="banner" :class="pcOrWx?'bannerPhone':''">
      <Carousel v-if="pcOrWx" v-model="bannerValue" loop autoplay :autoplay-speed=4000>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner-one.png" alt=""></div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner-two.png" alt=""></div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner-three.png" alt=""></div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner-four.png" alt=""></div>
        </CarouselItem>
      </Carousel>
      <Carousel v-else="pcOrWx" v-model="bannerValue" loop autoplay :autoplay-speed=4000>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner1.jpg" alt=""></div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner5.jpg" alt=""></div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner6.jpg" alt=""></div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel"><img src="../assets/menuBar/banner7.jpg" alt=""></div>
        </CarouselItem>
      </Carousel>
    </div>
  </div>
</template>

<script>
  import MenuPc from './header/menuPc'
  import MenuPhone from './header/menuPhone'
  import {mapState, mapActions} from "vuex"

  export default {
    name: "menuBar",
    components: {
      MenuPc,
      MenuPhone,
    },
    computed: {
      ...mapState({
        pcOrWx: (state) => state.config.PC_OR_WX,
      })
    },
    data() {
      return {
        menuNavPc: false,
        menuNavWx: false,
        bannerValue: 0,

      }
    },
    methods: {},
    mounted() {

    },


  }
</script>

<style scoped lang="less">
  .menuBar {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
    .topNavPhone{
      height: 20px;
      background-color: #4bb2df;
    }
    .topNav {
      height: 40px;
      background-color: #4bb2df;
      .topNavCon {
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .cn, .en {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }

        .cn {
          background: url('../assets/menuBar/header_btn_cn_hover.png') no-repeat center /24px 24px;
        }
        .en {
          background: url('../assets/menuBar/header_btn_en_hover.png') no-repeat center /24px 24px;
        }
        .cn.active {
          background: url('../assets/menuBar/header_btn_cn_click.png') no-repeat center /24px 24px;
        }
        .en.active {
          background: url('../assets/menuBar/header_btn_en_click.png') no-repeat center /24px 24px;
        }
      }
    }

    .banner {
      width: 100%;
      max-height: 400px;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 400px;
      }

    }
    .bannerPhone{
      img{
        width: 100%;
        height: 90px;
      }
    }
  }


</style>
